<template>
	<view style="background-color: #f1f1f1;height: 180vh;">
		<view class="top">
			<view class="topOne">
				<view class="topOne-left">
					<text>保养信息</text>
				</view>
				<view class="topOne-right">
					<text>保养申请单号：{{dataList.YBQNUM}}</text>
				</view>
			</view>
			<view class="two">
				<!-- <view class="two-one">
					<view class="two-oneLeft" style="width: 250rpx;">保养申请单号：</view>
					<view class="two-oneRight">{{dataList.YBQNUM}}</view>
				</view> -->
				<view class="two-one">
					<view class="two-oneLeft" style="width: 240rpx;">计划保养日期 :</view>
					<view class="two-oneRight">{{dataList.YJIHUA}}</view>
				</view>
				<view class="two-one">
					<view class="two-oneLeft">设备编号 :</view>
					<view class="two-oneRight">{{dataList.YDVNUM}}</view>
				</view>
				<view class="two-one">
					<view class="two-oneLeft">设备名称 :</view>
					<view class="two-oneRight">{{dataList.YDVNAM}}</view>
				</view>
				<view class="">
					<view class="" v-if="dataList.YYDJ==2">
						<view class="two-one">
							<view class="two-oneLeft" style="width: 240rpx;">实际保养日期 :</view>
							<view class="two-oneRight">{{dataList.YSJDAT}}</view>
						</view>
						<view class="two-one">
							<view class="two-oneLeft" style="width: 210rpx;">实际保养人 :</view>
							<view class="two-oneRight">{{dataList.YSJYGU}}</view>
						</view>
					</view>
					<view class="" v-else>
					</view>
				</view>
				<view class="">
					<view class="" v-if="dataList.YYDJ==2">
						<view class="two-one">
							<view class="two-oneLeft" style="width: 240rpx;">实际保养工时 :</view>
							<view class="two-oneRight">{{dataList.YBYGS}}</view>
						</view>
					</view>
					<view class="" v-else>
					  <u--form :model="form" ref="uForm" :rules="rules">
						<view class="two-one">
							<u-form-item label="实际保养工时 :" labelWidth="220rpx" prop="sjbygs"  style="margin-left: 18rpx;">
							</u-form-item>
							<u-input placeholder="请输入实际保养工时" v-model="dataList.YBYGS" />
						</view>
					  </u--form>
					</view>
				</view>
				<view class="">
					<view class="two-oneLeft" style="width: 240rpx;">实际保养内容 :</view>
					<!-- <view class="two-oneRight">{{dataList.YDENAM}}</view> -->
					<view class="table-container" style="margin-left: -30rpx;">

						<uni-table border stripe emptyText="暂无更多数据">
								<uni-tr>
									<uni-th width="20">序号</uni-th>
									<uni-th width="150">维护内容</uni-th>
									<uni-th width="70">执行情况确认</uni-th>
									<uni-th width="120">图片</uni-th>
									<uni-th width="200">异常情况描述</uni-th>
									<uni-th width="100">项目</uni-th>
									<uni-th width="80">位置</uni-th>
								</uni-tr>
								<uni-tr v-for="(item,index) in dataListTwo" id='index'>
									<uni-td>{{item.YNO}}</uni-td>
									<uni-td style="font-size: 10px;">{{item.YWHNR}}</uni-td>
									<uni-td>
										<view v-if="dataList.YYDJ==2">{{item.YZXQK==1?'正常':'异常'}}</view>
						<view class="dxRadio" v-else>
							<u-radio-group
							    v-model="radiovalue1[index]"
								placement="column"
							    @change="val => groupChange(val,index)"
							  >
							    <u-radio
							      :customStyle="{marginBottom: '10px'}"
							      v-for="(item, index1) in radiolist1"
							      :key="index1"
							      :label="item.name"
								  labelSize="5px"
								  iconSize="5px"
								  size="15px"
							      :name="item.name"
							      @change="val => radioChange(val,index)"
							    >
							    </u-radio>
							  </u-radio-group>
						</view>
					</uni-td>
									<uni-td>
										<u-album :urls="urls[index]" :singleSize="50" :multipleSize="50" :maxCount="1" :rowCount="1"
											v-if="dataList.YYDJ==2"></u-album>
										<view class="photoBox" v-else>
											<u-upload
													:fileList="fileList1[index]"
													@afterRead="afterRead"
													@delete="deletePic"
													:name=String(index)
													:key=index
													multiple
													:maxCount="10"
													accept="image"
													:capture="capture"
												></u-upload>
										</view>
									</uni-td>

									<uni-td>
										<view v-if="dataList.YYDJ==2">{{item.YICMS}}</view>
										<view v-else>
										<u-textarea placeholder="" v-model="dataListTwo[index].YICMS" ></u-textarea>
										</view>
									</uni-td>
									<uni-td>{{item.YXM}}</uni-td>
									<uni-td>{{item.YWEIZ}}</uni-td>
								</uni-tr>
							</uni-table>
					</view>
				</view>
			</view>
		</view>
		<view class="btnBox">
			<view class="btnBox-right" style="margin-left: 510rpx;margin-top: 80rpx;"
				v-if="dataList.YYDJ==1">
				<u-button class="rgzxBox-btn2" type="primary"
				@click="okBtn">保养登记</u-button>
			</view>
		</view>

		<!-- <u-modal width="430rpx" :show="show" :title="title" :content='content'
		@confirm="confirm"></u-modal> -->
	</view>
</template>

<script>
	import * as dd from 'dingtalk-jsapi'
	export default {
		data() {
			return {
				dataList: {},
				dataListTwo: {},
				dataList2: [],
				num:'',
				show:false,
				title:'确认撤销',
				content:'您确定要撤销此单子吗？',
				dh:'',
				urls:[],
				urls2:[],
				mediaIds: [],
				form: {
						sjbygs: ''
					 },
				 rules: {
					sjbygs: [
						{
							required: true,
							message: '请输入',
							trigger: ['blur', 'change']
									}
							],
				},
				radiolist1: [{
				            "name": "正常",
				            "a": "1",
				            value: false
				          },
				           {
				            "name": "否",
							"a": "2",
				            value: false
				            }
				          ],
				radiovalue1: [],
				fileList1: [],
				capture: ['camera'],
				ddconfig:{
					nonceStr:'SAGEX3',
					timeStamp:0,
				},
				urls:[],
				userInfo: {},
				isClick: false,
			}
		},
		onLoad(query) {
			// console.log(query,'补充');
			// 从 query 中获取传递过来的数据，并将其转换为对象
			// this.dataList = JSON.parse(query.bcData);
			this.userInfo = uni.getStorageSync('userInfo')
			this.num = query.num || 'XBQ24030003';
			this.dh = this.num
			// console.log(this.dataList,'1');
			this.init()
			// this.initdd()
		},
		methods: {
			initdd(){
				// alert(location.href)
				this.ddconfig.timeStamp=new Date().getTime()
				uni.request({
				  url: 'http://125.64.76.148:8125/KXJDDDApi/ddconfig?code=1'
				  +'&nonceStr='+this.ddconfig.nonceStr
				  +'&timeStamp='+this.ddconfig.timeStamp
				  +'&url=http://125.64.76.148:8125/repair/', // 替换为实际的接口URL
				  method: 'GET',
				  data: {},
				  success: (res) => {
					  console.log(res)
					  // uni.$u.toast('initdd.success:'+JSON.stringify(res))
					  // alert('success:'+JSON.stringify(res))
					  dd.config({
					      agentId: '2833818530', // 必填，微应用ID
					      corpId: 'ding81f5b58b1546a0fd35c2f4657eb6378f',//必填，企业ID
					      timeStamp: this.ddconfig.timeStamp, // 必填，生成签名的时间戳
					      nonceStr: this.ddconfig.nonceStr, // 必填，自定义固定字符串。
					      signature: res.data.sign, // 必填，签名
					      type:0/1,   //选填。0表示微应用的jsapi,1表示服务窗的jsapi；不填默认为0。该参数从dingtalk.js的0.8.3版本开始支持
					      jsApiList : [
					          'device.audio.startRecord',
					          'device.audio.stopRecord',
					          'device.audio.play',
							  'device.audio.download',
					      ] // 必填，需要使用的jsapi列表，注意：不要带dd。
					  });

					  dd.error(function (err) {
					      uni.$u.toast('钉钉初始化错误，录音功能无法使用: ' + JSON.stringify(err));
					  })//该方法必须带上，用来捕获鉴权出现的异常信息，否则不方便排查出现的问题
				  },
				  fail(err) {
					  alert('fail:'+err)
				  	console.log(err)
				  }
				})
			},
			init(){
				let GRP1 = {
						GRP1: [{
							YBQNUM: this.num
						}]
				}
				let GRP1Json = JSON.stringify(GRP1)
				// console.log(GRP1Json);
				uni.request({
				  url: 'http://125.64.76.148:8125/KXJDX3Api/x3api', // 替换为实际的接口URL
				  method: 'POST',
				  data: {
					"username":"APIUSER",
					"passwd":"123",
					"publicName":"WSLISTXBQ",
					"method":"run",
					"test":uni.getStorageSync('test') ? "true" : "false",
					"inputXml":JSON.stringify(GRP1)
				  },
				  success: (res) => {
					// 请求成功的处理逻辑
					let resR1 = JSON.parse(res.data.message)
					this.dataList= resR1.GRP1[0]
					this.dataListTwo= resR1.GRP2
					console.log(this.dataList,'登记界面数据数据');
					this.oneLength= resR1.GRP1.length
					var files = resR1.GRP4
					this.urls=[]
					for (var i = 0; i < this.dataListTwo.length; i++) {
						this.urls.push([])
						for (var ii = 0; ii < files.length; ii++) {
							if(this.dataListTwo[i].YBQMLIN==files[ii].VCRLIN){
								this.urls[i].push(files[ii].URL)
							}
						}
					}
					this.fileList1=[]
					for (var i = 0; i < this.dataListTwo.length; i++) {
						this.fileList1.push([])
						if(this.dataList.YYDJ==2){

						}else{
							this.dataListTwo[i].YZXQK=0
						}
					}
					console.log(this.fileList1)
					this.dataList.files=resR1.GRP3
				  },
				  fail: (err) => {
					// 请求失败的处理逻辑
					console.error(err);
					alert("系统错误，请联系管理员 错误信息："+err);
				  }
				});
			},
			iwantBc(){
				// 使用 uni.navigateTo 跳转到 my 页面，并传递数据
				 uni.navigateTo({url:"/pages/bclyPages/bclyPages?dataList="+JSON.stringify(this.dataList)})
			},
			groupChange(n,index) {
					if(n=='否'){
						this.dataListTwo[index].YZXQK = "2"
					}else{
						this.dataListTwo[index].YZXQK = "1"
					}
			      },
			radioChange(n,index) {
				console.log(n)
				console.log(index)
				if(n=='否'){
					this.dataListTwo[index].YZXQK = "2"
				}else{
					this.dataListTwo[index].YZXQK = "1"
				}
			},
			okBtn(){
				// 使用 uni.navigateTo 跳转到 my 页面，并传递数据
				 // uni.navigateTo({url:"/pages/txwxjlPages/txwxjlPages?typ=2&num="+this.dh});
				 //dataList="+JSON.stringify(this.dataList)})
				if(this.isClick){
					console.log('重复点击')
					return
				}
				
				 var djmx = this.dataListTwo
				 if(djmx.length==0){
				 	uni.$u.toast('未找到保养项')
				 	return
				 }
				 for (var i = 0; i < djmx.length; i++) {
					if(djmx[i].YZXQK==0){
						uni.$u.toast('行'+(i+1)+'未勾选执行情况，请处理后重新提交')
						return
					}
					if(djmx[i].YZXQK=='2' && djmx[i].YICMS==''){
						uni.$u.toast('行'+(i+1)+'未填写异常描述，请处理后重新提交')
						return
					}
					if(this.fileList1[i].length==0){
						uni.$u.toast('行'+(i+1)+'未上传照片，请处理后重新提交')
						return
					}
					for (var ii = 0; ii < this.fileList1[i].length; ii++) {
						if(this.fileList1[i][ii].url==''){
							uni.$u.toast('存在上传失败的图片，请处理后重新提交')
							return
						}
						if(this.fileList1[i][ii].url.slice(0,4)=='blob'){
							uni.$u.toast('图片上传中，请稍后重试')
							return
						}
					}
				 }
				this.isClick = true

				let GRP1 = {
					GRP1: [{
						YOPERATE: 1,
						YBQNUM: this.dataList.YBQNUM,
						YSJDAT: this.dataList.YSJDAT,//实际保养日期
						YSJYGU: this.userInfo.NAME,//this.dataList.YSJYGU,//实际保养人
						YBYGS: this.dataList.YBYGS//实际保养工时
					}],
					GRP4: []
				}
				GRP1.GRP2=[]
				for (var i = 0; i < this.dataListTwo.length; i++) {
					GRP1.GRP2.push({
						YBQNUMD: this.dataList.YBQNUM,//申请单
						YBQMLIN: this.dataListTwo[i].YBQMLIN,//申请行 序号
						YZXQK:  this.dataListTwo[i].YZXQK,//执行情况 1正常 2异常
						YICMS:  this.dataListTwo[i].YICMS,//异常描述
					})
				}
				GRP1.GRP2=[]
				GRP1.GRP4=[]
				for (var i = 0; i < this.dataListTwo.length; i++) {
					GRP1.GRP2.push({
						YBQNUMD: this.dataList.YBQNUM,//申请单
						YBQMLIN: this.dataListTwo[i].YBQMLIN,//申请行 序号
						YZXQK:  this.dataListTwo[i].YZXQK,//执行情况 1正常 2异常
						YICMS:  this.dataListTwo[i].YICMS,//异常描述
					})
					for (var ii = 0; ii < this.fileList1[i].length; ii++) {
						GRP1.GRP4.push({
							URL: this.fileList1[i][ii].url,
							VCRNUM: this.dataList.YBQNUM,
							VCRLIN: this.dataListTwo[i].YBQMLIN,
						})
					}
				}

				let GRP1Json = JSON.stringify(GRP1)
				console.log(GRP1Json);
				// return
				uni.request({
				  url: 'http://125.64.76.148:8125/KXJDX3Api/x3api', // 替换为实际的接口URL
				  method: 'POST',
				  data: {
					"username":"APIUSER",
					"passwd":"123",
					"publicName":"WSGENXBQ",
					"method":"run",
					"test":uni.getStorageSync('test') ? "true" : "false",
					"inputXml":JSON.stringify(GRP1)
				  },
				  success: (res) => {
					  // console.log(res.data.message,'67676767');
					let wpdData = JSON.parse(res.data.message)
					this.isClick = false
					if(wpdData.GRP3.WOK==0){
						// 显示创建成功的消息提示
						 uni.showToast({
						   title: '登记成功',
						   icon: 'success',
						   duration: 2000
						});
						 uni.switchTab({url:"/pages/managementCenter/managementCenter"})
					}else{
						uni.showToast({
						   title: '登记失败',
						   icon: 'error',
						   duration: 2000
						});
					}
				  },
				  fail: (err) => {
					// 请求失败的处理逻辑
					console.error(err);
					this.isClick = false
				  }
				});

			},
			// 删除图片
			deletePic(event) {
				this.fileList1[event.name].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				// console.log(event)
				console.log(this.fileList1)
				let fileListLen = this.fileList1[event.name].length
				lists.map((item) => {
					this.fileList1[event.name].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList1[event.name][fileListLen]
					if(result==''){
						this.fileList1[event.name].splice(fileListLen, 1, Object.assign(item, {
							status: 'failed',
							message: '上传失败',
							url: ''
						}))
						fileListLen++
					}else{						
						this.fileList1[event.name].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						}))
						fileListLen++
					}
				}
				console.log(this.fileList1)
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://125.64.76.148:8125/KXJDDDApi/file/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								// console.log(res)
								resolve(JSON.parse(res.data).data)
							}, 1000)
						},
						fail:(err) => {
							console.log(err)
							resolve('')
						}
					});
				})
			},
		}
	}
</script>

<style>
table{
	border-collapse: collapse;
	text-align: center;
}
table1,th,td{
	border: 1px solid gainsboro ;
}
.table-container {
  /* width: 620px; */
  overflow: auto;
	background-color: white;
	/* height: 300px; */
}

table1 {
  width: 95%; /* 表格宽度占满容器 */
  table-layout: fixed; /* 固定表格布局 */
}

td1 {
  width: 25%; /* 每列宽度为容器宽度的四分之一 */
}
.top{
	width: 90%;
	background-color: white;
	position: relative;
	top: 50rpx;
	margin: 0 auto;
}
.topOne{
	height: 90rpx;
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between;
}
.topOne-left{
	width: 200rpx;
	font-weight: bold;
	font-size: 36rpx;
	text-align: center;
	padding-top: 20rpx;
}
.topOne-right{
	width: 400rpx;
	text-align: center;
	padding-top: 20rpx;
	color: gray;
	font-size: 28rpx;
}
.two{
	background-color: white;
}
.two-one{
	display: flex;
	justify-content: space-between;
}
.two-oneLeft{
	width: 190rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.two-oneRight{
	width: 350rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.two2{
	background-color: white;
}
.two2-one{
	height: 60rpx;
	display: flex;
	justify-content: space-between;
}
.two2-oneLeft{
	width: 190rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.two2-oneRight{
	width: 350rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.wxxx{
	width: 90%;
	background-color: white;
	position: relative;
	top: 100rpx;
	margin: 0 auto;
}
.wxxxOne{
	height: 90rpx;
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between;
}
.wxxxOne-left{
	width: 230rpx;
	font-weight: bold;
	font-size: 36rpx;
	text-align: center;
	padding-top: 20rpx;
}
.ddlcjlBox{
	width: 90%;
	position: relative;
	top: 160rpx;
	margin: 0 auto;
	background-color: white;
	font-size: 28rpx;
}
.ddlcjlBox-top{
	height: 70rpx;
	color: gray;
	text-align: center;
	font-size: 38rpx;
	padding-top: 15rpx;
}
.ddlcjlBox-two{
	height: 50rpx;
	display: flex;
	justify-content: space-between;
	color: gray;
	padding-left: 15rpx;
}
.ddlcjlBox-twoLeft{
	width: 320rpx;
}
.ddlcjlBox-twoCenter{
	width: 100rpx;
}
.ddlcjlBox-twoRightr{
	width: 100rpx;
}
.bcjlBox{
    width: 90%;
	height: 70rpx;
	position: relative;
	top: 200rpx;
	margin: 0 auto;
	background-color: white;
	color: gray;
	font-size: 32rpx;
	padding-top: 20rpx;
	padding-left: 20rpx;
}
.jlBox{
	width: 90%;
	height: 00rpx;
	position: relative;
	top: 100rpx;
	margin: 0 auto;
	background-color: white;
	font-size: 42rpx;
	padding-top: 0rpx;
	padding-left: 300rpx;
}
.btnBox{
	width: 100%;
	height: 80rpx;
	position: relative;
	top: 0rpx;
	left: -270rpx;
	display: flex;
	justify-content: space-between;
}
.btnBox-left{
	width: 350rpx;
	border-right: 1px solid #ccc;
}
.btnBox-right{
	width: 350rpx;
}
</style>
